<template>
  <div class="carousel">
    <div class="carouselBox" ref="myElement">
      <div
        class="carousel-container"
        :style="{ transform: `translateX(${translate}px)`, width: boxContiner + 'px' }">
        <div
          class="carousel-item"
          :style="{ width: boxWidth / 4 + 'px' }"
          v-for="(item, index) in carouselItems"
          :key="item.id"
          :class="{ active: currentIndex1 === index }"
          @click="setActive(index, item)">
          <img :src="item.thumbnailPicUrl" :alt="item.templateName" />
          <div class="caption">{{ item.templateName }}</div>
        </div>
      </div>
    </div>
    <div class="carousel-controls">
      <button class="carousel-control prev" @click="scrollCarousel(-1)">
        <Icon type="ios-arrow-back" size="50" color="#333" />
      </button>
      <button class="carousel-control next" @click="scrollCarousel(1)">
        <Icon type="ios-arrow-forward" size="50" color="#333" />
      </button>
    </div>
  </div>
</template>

<script>
  import bgMapMgr from '@/biz/bgMap/bgMap'
  export default {
    data() {
      return {
        carouselItems: [],
        translate: 0,
        currentIndex: 0,
        currentIndex1: -1,
        slideWidth: 0,
        boxWidth: '',
        boxContiner: 0,
        templateId: ''
      }
    },
    created() {
      console.log('11')
    },
    mounted() {
      this.tempListGet().then((res) => {
        console.log(res, 'dd')
        this.boxWidth = this.$refs.myElement.offsetWidth
        const container = document.querySelector('.carousel-item')
        console.log(this.boxWidth, container, '00')
        let aw = this.boxWidth / 4
        container.style.width = aw
        this.boxContiner = aw * this.carouselItems.length
      })
    },
    methods: {
      getTemplateId(id) {
        console.log(id, '22id')

        if (id) {
          this.templateId = id
          console.log(this.templateId, this.carouselItems, '22')
          this.currentIndex1 = this.carouselItems.findIndex((item) => {
            return item.id == this.templateId
          })

          let currentItem = this.carouselItems.find((item) => {
            return item.id == this.templateId
          })
          console.log(currentItem, 'currentItem')
          this.$emit('tempChoose', currentItem)
          console.log(this.currentIndex1, '22')
        } else {
          this.$emit('tempChoose', '')
        }
      },
      // 上架的模板
      tempListGet() {
        return bgMapMgr
          .getTemplatePreview()
          .then((res) => {
            console.log(this.templateId, '33')

            this.carouselItems = res
            return res
          })
          .catch((err) => {})
      },
      setActive(index, item) {
        this.currentIndex1 = index
        this.$emit('tempChoose', item)
      },
      scrollCarousel(direction) {
        const maxIndex = this.carouselItems.length
        const scrollStep = 4 // 每次滚动的图片数量

        console.log(this.currentIndex, maxIndex, 'this.currentIndex')
        if (direction === -1) {
          if (this.currentIndex <= 0) {
            this.$Message.warning('已经是第一张')
          } else {
            this.currentIndex = Math.max(this.currentIndex - scrollStep, 0) // 往前滚动
          }
        } else if (direction === 1) {
          if (this.currentIndex >= maxIndex - scrollStep) {
            this.$Message.warning('已经是最后一张')
          } else {
            this.currentIndex = Math.min(this.currentIndex + scrollStep, maxIndex - 1) // 往后滚动
          }
        }

        const carouselItemWidth = this.$el.querySelector('.carousel-item').offsetWidth
        this.translate = -this.currentIndex * carouselItemWidth
      }
    }
  }
</script>

<style>
  .carousel {
    position: relative;
    width: 100%;
    padding: 0 10px;
    height: 120px;
  }
  .carouselBox {
    width: 80%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    max-height: 100%;
  }

  .carousel-container {
    max-height: 90%;
    /* display: flex; */
    transition: transform 0.5s ease-in-out;
    white-space: nowrap; /* 设置为不换行 */
  }

  .carousel-item {
    text-align: center;
    border: 2px transparent solid;
    float: left;
  }
  .carousel-item img {
    display: block;
    margin: 0 auto;
    height: 80px;
    max-width: 90%;
  }

  .carousel-control.prev {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 24px;
    color: #000000;
    opacity: 0.5;
    outline: none;
    position: absolute;
    top: 45%;
    left: 0; /* 左侧箭头位置调整为左边缘 */
    transform: translateY(-50%);
  }
  .carousel-control.next {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 24px;
    color: #000000;
    opacity: 0.5;
    outline: none;
    position: absolute;
    top: 45%;
    right: 0; /* 右侧箭头位置调整为右边缘 */
    transform: translateY(-50%);
  }

  .carousel-control:hover {
    opacity: 1;
  }

  .caption {
    margin-top: 2px;
    line-height: 1;
    font-size: 14px;
    width: 100%;
    white-space: wrap;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .carousel-item.active {
    border: 2px solid #2d8cf0;
  }
</style>
